<template>
  <div class="tableModel">
    <div class="item">
      <div class="itemTit" @click="dialogTableVisible=true">{{ props.title }}</div>
      <table class="table" border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr class="title">
            <th v-for="(item, i) in props.columns" :key="i"  v-show="!item?.hidden">
              {{ item.title }}
            </th>
          </tr>
        </thead>
        <tbody ref="scrollRef1" class="tboodyBox" @mouseover="foucus" @mouseout="blur">
          <tr class="cont" v-for="(item1, i) in props.data" :key="i"    >
            <td v-for="(item2, t) in props.columns" :key="t"   v-show="!item2?.hidden">
              {{ item1[item2.key] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>


    <el-dialog v-model="dialogTableVisible" :title="props.title" width="1600" >
   
    <el-table :data="props.data" style="height: 600px;">
    
      <el-table-column  v-for="(item2, t) in props.columns" :key="t"  :property="item2.key" :label="item2.title" />
    
    </el-table>
  </el-dialog>

  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";


const dialogTableVisible = ref(false)
/** @api */
interface Props {
  title: string;
  columns: { title: string; key: string ;hidden?:boolean}[];
  data: { [key: string]: string | number }[];
}
// 组件传参
const props = withDefaults(defineProps<Props>(), {
  title: "厂房",
  columns: () => [],
  data: () => [],
});
/** @数据 */
/** 滚动定时器 */

const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
]



let scrollTimer1: number | any = 0;
const scrollRef1 = ref<any>(null);
/** @生命周期 */
onMounted(() => {


  
  beginScroll();
});
/** @方法 */
const foucus = () => {
  clearInterval(scrollTimer1);
};
const blur = () => {
  scrollTimer1 = undefined;
  loopScroll();
};
const beginScroll = () => {
  setTimeout(() => {
    loopScroll();
  }, 500);
};
const loopScroll = () => {
  scrollTimer1 = setInterval(() => {
    changeScrollTop(scrollRef1.value);
  }, 100);
};
const changeScrollTop = (dom: any) => {
  // const dom = scrollRef.value?.wrapRef;
  if (dom) {
    // console.log('dom', dom.scrollHeight, dom.clientHeight)
    /** 小于一行就不滚动 */
    if (dom.scrollHeight - dom.clientHeight < 55) {
      return;
    }
    dom.scrollTop = dom.scrollTop + 2;
    const top = dom.scrollTop;
    const sHeight = dom.scrollHeight;
    const cHeight = dom.clientHeight;
    if (top + cHeight + 50 >= sHeight) {
      dom.scrollTop = 0;
    }
  }
};
/** @侦听器 */
/** @公共方法 */
</script>
<style lang="scss" scoped>
.tableModel {
  width: 461px;
  height: 260px;
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;

  .itemTit {
    // width: 410px;
    height: 30px;
    font-size: 22px;
    margin: 5px 0;
    letter-spacing: 2px;
    background: url("@/assets/imgs/tit-03.png") no-repeat center center;
    background-size: 410px 30px;
    cursor: pointer;
  }

  // table样式
  table thead,
  tbody tr,
  tfoot tr,
  thead tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  th {
    font-weight: normal !important;
    padding: 0;
  }

  .title {
    // display: flex;
    // justify-content: space-between;
    height: 27px;
    background: rgba(6, 104, 185, 0.44);
  }

  .tboodyBox {
    width: 100%;
    display: block;
    height: 180px;
    overflow-y: scroll;
    overflow-x: hidden;

    &::-webkit-scrollbar {
      width: 1px;
    }

    &::-webkit-scrollbar-thumb {
      width: 1px;
      border-radius: 10px;
      // background-color: #a8a8a8;
    }

    &::-webkit-scrollbar-track {}

    .cont {
      height: 45px;
      // line-height: 45px;
    }

    .cont:nth-child(2n) {
      background: #0d2a53;
    }
  }
}
</style>
